<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>完美电商</title>
    <!-- Bootstrap -->
    <link href="${pageContext.request.contextPath }/static/vendors/bootstrap/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <!-- Font Awesome -->
    <link href="${pageContext.request.contextPath }/static/vendors/font-awesome/css/font-awesome.min.css"
          rel="stylesheet">
    <!-- NProgress -->
    <link href="${pageContext.request.contextPath }/static/vendors/nprogress/nprogress.css" rel="stylesheet">
    <!-- iCheck -->
    <link href="${pageContext.request.contextPath }/static/vendors/iCheck/skins/flat/green.css" rel="stylesheet">
    <!-- bootstrap-progressbar -->
    <link href="${pageContext.request.contextPath }/static/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css"
          rel="stylesheet">
    <!-- JQVMap -->
    <link href="${pageContext.request.contextPath }/static/vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>

    <!-- Custom Theme Style -->
    <link href="${pageContext.request.contextPath }/static/build/css/custom.min.css" rel="stylesheet">

    <!-- PNotify -->
    <link href="${pageContext.request.contextPath }/static//vendors/pnotify/dist/pnotify.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/static//vendors/pnotify/dist/pnotify.buttons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/static//vendors/pnotify/dist/pnotify.nonblock.css" rel="stylesheet">
</head>

<body class="nav-md">
<div class="container body">
    <div class="main_container">
        <%@include file="/WEB-INF/jsps/menu.jsp" %>
        <!-- top navigation -->
        <%@include file="/WEB-INF/jsps/top.jsp" %>
        <!-- /top navigation -->

        <!-- page content -->
        <div class="right_col" role="main">

            <form class="form-horizontal form-label-left" id="AddForm" method="post">

                <span class="section">添加商品分类</span>

                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3" for="first-name">添加父类 <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <!-- Button trigger modal -->
                        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">
                            请选择
                        </button>
                        <input type="hidden" value="" name="cid" id="cid"><span></span>
                        <span style="margin-left: 20px;font-size: 12px;color: #909090;"><span style="font-weight: bold">备注：</span>默认是不选择父类</span>
                        <!-- Modal -->
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="myModalLabel">当前类别</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div id="tree"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3" for="pname">类别名称 <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6">
                        <input type="text" id="pname" name="pname" required="required"
                               class="form-control col-md-7 col-xs-12">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-2 col-sm-2 col-md-offset-3">
                        <button type="button" id="btnAdd" class="btn btn-primary">添加</button>
                    </div>
                </div>
            </form>

        </div>

        <!-- footer content -->
        <%@include file="/WEB-INF/jsps/footer.jsp" %>
        <!-- /footer content -->
    </div>
</div>

<!-- jQuery -->
<script src="${pageContext.request.contextPath }/static/vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="${pageContext.request.contextPath }/static/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="${pageContext.request.contextPath }/static/vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="${pageContext.request.contextPath }/static/vendors/nprogress/nprogress.js"></script>
<!-- bootstrap-progressbar -->
<script src="${pageContext.request.contextPath }/static/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<!-- iCheck -->
<script src="${pageContext.request.contextPath }/static/vendors/iCheck/icheck.min.js"></script>
<!-- Skycons -->
<script src="${pageContext.request.contextPath }/static/vendors/skycons/skycons.js"></script>
<!-- Custom Theme Scripts -->
<script src="${pageContext.request.contextPath }/static/build/js/custom.min.js"></script>
<%--botstrap-treeview --%>
<script src="${pageContext.request.contextPath }/static/plugins/bootstrap-treeview20161102/js/bootstrap-treeview.min.js"></script>
<!-- PNotify -->
<script src="${pageContext.request.contextPath }/static/vendors/pnotify/dist/pnotify.js"></script>
<script src="${pageContext.request.contextPath }/static/vendors/pnotify/dist/pnotify.buttons.js"></script>
<script src="${pageContext.request.contextPath }/static/vendors/pnotify/dist/pnotify.nonblock.js"></script>


<!-- 图片上传 -->
<script type="text/javascript">
    //页面初始化完毕后执行此方法
    $(function () {
        //分类树菜单
        var getTree = function () {
            $.ajax({
                url: "${pageContext.request.contextPath }/category/showCategory",//获取节点数据
                dataType: "json",
                success: function (data) {
                    $('#tree').treeview({
                        data: data,//treeview控件绑定的数据
                        onNodeSelected: function (event, data) {
                            $('#cid').val(data.cid);
                            $('#cid').next('span').html(data.text);
                            $('#myModal').modal('hide');
                        }
                    });
                    $("#tree").treeview('collapseAll', {silent: true});
                },
            });
        };
        getTree();

        $("#btnAdd").click(function () {
            var mId = 0;
            var mCid = $("#cid").val();// 父类id
            if(mCid != null) {
                mId = mCid;
            }
            if($("#pname").val() == "") {
                new PNotify({
                    title: '小贴士',
                    text: '请输入类别名称！',
                    type: 'warnning',
                    styling: 'bootstrap3',
                    hide: true
                });
                return 0;
            }
            var mParam = {
                parentid: mId,
                cname: $("#pname").val()
            };
            $.ajax({
                url:"${pageContext.request.contextPath}/product/addCategory",
                data:JSON.stringify(mParam),
                dataType:"json",
                type: "POST",
                contentType:"application/json",
                success: function (res) {
                    if(res.code == 0) {
                        $('#cid').next('span').html("");
                        $("#pname").val("");
                        new PNotify({
                            title: '小贴士',
                            text: res.msg,
                            type: 'success',
                            styling: 'bootstrap3',
                            hide: true
                        });
                    } else {
                        new PNotify({
                            title: '小贴士',
                            text: res.msg,
                            type: 'error',
                            styling: 'bootstrap3',
                            hide: true
                        });
                    }
                }
            });
        });
    });

</script>

</body>


</html>
